<template>
  <div class="com-web-tool-img-identify">
    <br />
    <a-card title="图片识别" size="small">
      <a-row>
        <a-col span="2">文字识别</a-col>
        <a-col span="22">
          <a-button
            v-for="(v, k) in dataArr"
            :key="k"
            class="btn"
            type="primary"
            size="small"
            @click="itemClick(k)"
          >
            {{ v }}
          </a-button>
        </a-col>
      </a-row>
    </a-card>
    <text-local-image ref="TextLocalImage" />
    <text-url-image ref="TextUrlImage" />
    <id-card-text ref="IdCardText" />
    <bankcard ref="Bankcard" />
    <Other ref="Other" />
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import TextLocalImage from './text/localImage'
import TextUrlImage from './text/urlImage'
import IdCardText from './text/idcard'
import Bankcard from './text/bankcard'
import Other from './text/other'

@Component({
  name: 'ComWebToolImgIdentify',
  components: {
    TextLocalImage,
    TextUrlImage,
    IdCardText,
    Bankcard,
    Other
  }
})
export default class ComWebToolImgIdentify extends Vue {
  // 数据数组
  dataArr = [
    '文字识别(本地图片)',
    '文字识别(图片链接)',
    '身份证识别',
    '银行卡识别',
    '其他文字识别'
  ]

  // item点击
  itemClick (index: number) {
    switch (index) {
      case 0:
        (this.$refs.TextLocalImage as any).show()
        break
      case 1:
        (this.$refs.TextUrlImage as any).show()
        break
      case 2:
        (this.$refs.IdCardText as any).show()
        break
      case 3:
        (this.$refs.Bankcard as any).show()
        break
      case 4:
        (this.$refs.Other as any).show()
        break
    }
  }
}
</script>

<style scoped lang="less">
.com-web-tool-img-identify {
}
</style>
